<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .nav>a {
            display: inline-block;
            width: 50px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            background-color: cornflowerblue;
            border: 1px solid blue;
        }

        .content {
            list-style: none;
        }
        .content .active{
          background :pink;
        }

        .content li {
            height: 30px;
            line-height: 30px;
            color: lightgreen;
        }

        .content li a {
            text-decoration: none;
            color: lightgreen;
            cursor: pointer;
        }

        .content li span {
            display: inline-block;
            width: 15px;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#/live">直播</a>
        <a href="#/vedio">视频</a>
    </div>
    <ul class="content">

    </ul>
</body>

</html>
<script>
    var lis = [...document.querySelectorAll('a')]
    

    lis.forEach((item, index)=> {  
        
        item.onclick = function () {
            item.style.background = 'cornflowerblue'
        }
        item.style.background = 'pink'
    })


   
    //------------------------------------------------------------------------------------------------------





    window.onhashchange = function () {
        //根据不同的hash值决定调用哪个渲染函数
        switch (location.hash) {
            case '#/live': live_page();
                break;
            case '#/vedio': vedio_page();
                break;
        }
    }

    // 数据库展示数据
    var data = [
        { id: 1, text: '恋情曝光？李小璐带小鲜肉路旁摆拍...' },
        { id: 2, text: '陈梦晒孕肚破离婚传闻，炫耀小伟买...' },
        { id: 3, text: '赵本山徒弟的片酬，小沈阳片酬一年...' },
        { id: 4, text: '老公比自己大的女明星，刘诗诗王艳...' },
        { id: 5, text: '"十一富婆"李冰,3000万豪...' },
        { id: 6, text: '被老外退货的8位女星,宁静遭家暴...' },
        { id: 7, text: '直播|双十一全球快递“云监工”...' },
        { id: 8, text: '慢直播|天周五号已就位，将于近日...' },
        { id: 9, text: '慢直播|邂逅绝美云海日出...' },
        { id: 10, text: '慢直播|济宁趵突泉-----天下第一泉...' },
        { id: 11, text: '直播|立冬拥抱暖阳...' },
        { id: 12, text: '慢直播：邂逅绝美云海日出...' },
    ]

    // // 一页渲染六条数据
    let pagesize = 6

    //渲染首页的内容
    function live_page() {
        document.querySelector('.content').innerHTML = data.slice(0, pagesize - 1).map((item, index) => {
            return `<li><span>${item.id}</span><a href="">${item.text}</a></li>`
        }).join('')
    };
    //渲染服务的内容
    function vedio_page() {
        document.querySelector('.content').innerHTML = data.slice(pagesize).map((item, index) => {
            return `<li><span>${item.id}</span><a href="">${item.text}</a></li>`
        }).join('')
    }

    live_page()

</script>